import { CBlockCustom, CFilterSelectCustom, FFormCustom } from '@vh-mobile/pro-components';
import MainContainerCustom from '@/components/MainContainerCustom';
import React, { useMemo, useRef } from 'react';
import { View } from '@tarojs/components';
import type { FilterRefObjType } from '@vh-mobile/pro-components/lib/c-filter-select-custom';
import type { FormCustomRefObjType } from '@vh-mobile/pro-components/lib/f-form-custom/types';
import { Tab, Tabs } from '@antmjs/vantui';
import './index.less';

export default function DemoFilterScreening() {
  const filterRef = useRef<FilterRefObjType | undefined>();
  const filterRef3 = useRef<FilterRefObjType | undefined>();
  const formRef = useRef<FormCustomRefObjType>();
  const valuesRef = useRef<any>();
  const activeRef = useRef<any>('1');

  const onConfirm = (value: any) => {
    console.log('value: ', value);
  };

  const columns: any[] = [
    {
      title: '汇总方式',
      dataIndex: 'iniStatus',
      valueType: 'FSelectCustom',
      fieldProps: {
        search: true,
        options: [
          { value: 1, label: '来电' },
          { value: 2, label: '来访' },
        ],
      },
    },
    {
      title: '开始日期',
      dataIndex: 'FSelectCustom',
      valueType: 'FSelectCustom',
      fieldProps: {
        options: [{ value: 1, label: 'asgj' }],
      },
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      valueType: 'FDatetimePickerCustom',
      fieldProps: {
        minDate: `${new Date().getFullYear() - 5}-01-01`,
        maxDate: `${new Date().getFullYear() + 5}-12-31`,
      },
      cellProps: {
        // position: 'bottom',
      },
    },
    {
      title: '排名依据',
      dataIndex: 'FCheckboxCustom',
      valueType: 'FCheckboxCustom',
      fieldProps: {
        options: [
          { value: 1, label: '选项一' },
          { value: 2, label: '选项选项一' },
          { value: 3, label: '选项三' },
          { value: 4, label: '选项四' },
          { value: 5, label: '选项五选项一' },
          { value: 6, label: '选项六' },
          { value: 7, label: '选项七' },
        ],
        multiple: true,
        checkboxAll: true,
      },
      cellProps: {
        position: 'bottom',
      },
    },
    {
      title: '时间区间',
      dataIndex: 'FCheckboxDatepickerCustom1',
      valueType: 'FCheckboxDatepickerCustom',
      fieldProps: {
        field: ['this-day', 'this-month', 'this-year'],
      },
      cellProps: {
        position: 'bottom',
      },
    },
    {
      title: '日期',
      dataIndex: 'FCheckboxDatepickerCustom2',
      valueType: 'FCheckboxDatepickerCustom',
      fieldProps: {
        datetimePicker: {
          minDate: `${new Date().getFullYear() - 5}-01-01`,
          maxDate: `${new Date().getFullYear() + 5}-12-31`,
        },
      },
      cellProps: {
        position: 'bottom',
      },
    },
  ];

  const columns1: any[] = [
    {
      title: '汇总方式',
      dataIndex: 'iniStatus',
      valueType: 'FSelectCustom',
      fieldProps: {
        search: true,
        options: [
          { value: 1, label: '来电' },
          { value: 2, label: '来访' },
        ],
      },
    },
    {
      title: '开始日期',
      dataIndex: 'FSelectCustom',
      valueType: 'FSelectCustom',
      fieldProps: {
        options: [{ value: 1, label: 'asgj' }],
      },
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      valueType: 'FDatetimePickerCustom',
      fieldProps: {
        minDate: `${new Date().getFullYear() - 5}-01-01`,
        maxDate: `${new Date().getFullYear() + 5}-12-31`,
      },
      cellProps: {
        // position: 'bottom',
      },
    },
  ];

  const columns2: any[] = [
    {
      title: '排名依据',
      dataIndex: 'FCheckboxCustom',
      valueType: 'FCheckboxCustom',
      fieldProps: {
        options: [
          { value: 1, label: '选项一' },
          { value: 2, label: '选项选项一' },
          { value: 3, label: '选项三' },
          { value: 4, label: '选项四' },
          { value: 5, label: '选项五选项一' },
          { value: 6, label: '选项六' },
          { value: 7, label: '选项七' },
        ],
        multiple: true,
        checkboxAll: true,
      },
      cellProps: {
        position: 'bottom',
      },
    },
    {
      title: '时间区间',
      dataIndex: 'FCheckboxDatepickerCustom1',
      valueType: 'FCheckboxDatepickerCustom',
      fieldProps: {
        field: ['this-day', 'this-month', 'this-year'],
      },
      cellProps: {
        position: 'bottom',
      },
    },
    {
      title: '日期',
      dataIndex: 'FCheckboxDatepickerCustom2',
      valueType: 'FCheckboxDatepickerCustom',
      fieldProps: {
        datetimePicker: {
          minDate: `${new Date().getFullYear() - 5}-01-01`,
          maxDate: `${new Date().getFullYear() + 5}-12-31`,
        },
      },
      cellProps: {
        position: 'bottom',
      },
    },
  ];

  const CFilterSelectCustomNode = useMemo(() => {
    return (
      <>
        <CBlockCustom title="只有筛选">
          <CFilterSelectCustom
            key="CFilterSelectCustom1"
            columns={columns}
            onConfirm={onConfirm}
            text="统计条件"
          />
        </CBlockCustom>

        <CBlockCustom title="带标题">
          <CFilterSelectCustom
            key="CFilterSelectCustom2"
            title="列表筛选"
            columns={columns}
            onConfirm={onConfirm}
            text="统计条件"
          />
        </CBlockCustom>

        <CBlockCustom title="只有标题">
          <CFilterSelectCustom key="CFilterSelectCustom3" title="列表筛选" />
        </CBlockCustom>

        <CBlockCustom title="复杂列表">
          <CFilterSelectCustom
            key="CFilterSelectCustom4"
            title="列表筛选"
            scrollWidth={380}
            dropdownColumns={[
              {
                width: 380,
                dataIndex: 'key',
                value: 1,

                options: [
                  {
                    text: '全部商品',
                    value: 0,
                  },
                  {
                    text: '新款商品',
                    value: 1,
                  },
                  {
                    text: '活动商品',
                    value: 2,
                  },
                ],
              },
            ]}
            columns={columns}
            onConfirm={onConfirm}
            text="统计条件"
          />
        </CBlockCustom>

        <CBlockCustom title="复杂列表2行">
          <CFilterSelectCustom
            key="CFilterSelectCustom5"
            title="列表筛选"
            scrollWidth={380}
            dropdownColumns={[
              {
                width: 190,
                dataIndex: 'key11',
                value: 1,
                dropdownItemProps: {
                  disabled: true,
                },
                options: [
                  {
                    text: '全部商品',
                    value: 0,
                  },
                  {
                    text: '新款商品',
                    value: 1,
                  },
                  {
                    text: '活动商品',
                    value: 2,
                  },
                ],
              },
              {
                width: 190,
                dataIndex: 'key22',
                value: 2,
                options: [
                  {
                    text: '全部商品',
                    value: 0,
                  },
                  {
                    text: '新款商品',
                    value: 1,
                  },
                  {
                    text: '活动商品',
                    value: 2,
                  },
                ],
              },
            ]}
            columns={columns}
            onConfirm={onConfirm}
            text="统计条件"
          />
        </CBlockCustom>

        <CBlockCustom title="复杂列表可滑动">
          <CFilterSelectCustom
            title="列表筛选"
            key="CFilterSelectCustom6"
            scrollWidth={380}
            dropdownColumns={[
              {
                width: 200,
                dataIndex: 'key1',
                value: 0,
                options: [
                  {
                    text: '全部商品1',
                    value: 0,
                  },
                  {
                    text: '新款商品1',
                    value: 1,
                  },
                  {
                    text: '活动商品1',
                    value: 2,
                  },
                ],
              },
              {
                width: 200,
                dataIndex: 'key2',
                value: 'a',
                options: [
                  {
                    text: '默认排序2',
                    value: 'a',
                  },
                  {
                    text: '好评排序2',
                    value: 'b',
                  },
                  {
                    text: '销量排序2',
                    value: 'c',
                  },
                ],
              },
              {
                width: 200,
                dataIndex: 'key3',
                value: 'c',
                options: [
                  {
                    text: '默认排序3',
                    value: 'a',
                  },
                  {
                    text: '好评排序3',
                    value: 'b',
                  },
                  {
                    text: '销量排序3',
                    value: 'c',
                  },
                ],
              },
              {
                width: 200,
                dataIndex: 'key4',
                value: 'b',
                options: [
                  {
                    text: '默认排序4',
                    value: 'a',
                  },
                  {
                    text: '好评排序4',
                    value: 'b',
                  },
                  {
                    text: '销量排序4',
                    value: 'c',
                  },
                ],
              },
            ]}
            columns={columns}
            onConfirm={onConfirm}
            text="统计条件"
          />
        </CBlockCustom>

        <CBlockCustom title="顶部出现">
          <CFilterSelectCustom
            key="CFilterSelectCustom7"
            title="列表筛选"
            scrollWidth={380}
            direction="top"
            filterRef={filterRef3}
            columns={columns}
            dropdownColumns={[
              {
                width: 380,
                dataIndex: 'topkey1',
                itemRender: () => {
                  return (
                    <View
                      onClick={() => {
                        filterRef3.current?.setShow(true);
                      }}
                    >
                      全部商品1
                    </View>
                  );
                },
              },
            ]}
            onConfirm={onConfirm}
            text="统计条件"
          />
        </CBlockCustom>

        <CBlockCustom title="自定义弹出内容">
          <CFilterSelectCustom
            key="CFilterSelectCustom8"
            scrollWidth={600}
            direction="top"
            filterRef={filterRef}
            dropdownColumns={[
              {
                width: 300,
                dataIndex: 'topkey1',
                itemRender: () => {
                  return (
                    <View
                      onClick={() => {
                        activeRef.current = '1';
                        console.log('===================');
                        console.log(1111111);
                        console.log('===================');
                        filterRef.current?.setShow(true);
                      }}
                    >
                      分组筛选1
                    </View>
                  );
                },
              },
              {
                width: 300,
                dataIndex: 'topkey2',
                itemRender: () => {
                  return (
                    <View
                      onClick={() => {
                        activeRef.current = '2';

                        console.log('===================');
                        console.log(222222);
                        console.log('===================');
                        filterRef.current?.setShow(true);
                      }}
                    >
                      分组筛选2
                    </View>
                  );
                },
              },
            ]}
            columnsRender={(fRef: any, onSubmit: any) => {
              fRef.current = {
                submit: () => {
                  const value = formRef.current?.getAllFieldsValue();
                  onSubmit(value);
                },
              };
              console.log('===================');
              console.log(valuesRef.current);
              console.log('===================');
              return (
                <Tabs active={activeRef.current}>
                  <Tab name="1" title="分组筛选1">
                    <FFormCustom
                      key="active1"
                      formRef={formRef}
                      columns={columns1}
                      initialValues={valuesRef.current}
                      submitRender={() => {
                        return <></>;
                      }}
                    />
                  </Tab>
                  <Tab name="2" title="分组筛选2">
                    <FFormCustom
                      key="active2"
                      formRef={formRef}
                      columns={columns2}
                      initialValues={valuesRef.current}
                      submitRender={() => {
                        return <></>;
                      }}
                    />
                  </Tab>
                </Tabs>
              );
            }}
            onConfirm={(v: any) => {
              const newValues = { ...valuesRef.current, ...v };
              valuesRef.current = newValues;
              console.log('===================');
              console.log(newValues);
              console.log('===================');
            }}
          />
        </CBlockCustom>
      </>
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return <MainContainerCustom>{CFilterSelectCustomNode}</MainContainerCustom>;
}
